<!--
  智慧社区管理系统 - 物业公司驾驶舱数据展示页面
  @author Wu.Liang
  @date 2025-01-30
-->
<template>
    <div class="property-dashboard-fullscreen">
        <!-- 页面头部 -->
        <div class="dashboard-header">
            <div class="header-left">
                <div class="weather-info">
                    <el-icon><Sunny /></el-icon>
                    <span>今日天气: 晴 26℃ 东南风</span>
                </div>
            </div>
            <div class="header-center">
                <h1 class="page-title">智慧社区物业驾驶舱</h1>
                <div v-if="currentCompanyName" class="company-name">{{ currentCompanyName }}</div>
                <div class="fullscreen-tip">若要退出全屏模式,请按住 Esc</div>
            </div>
            <div class="header-right">
                <div class="datetime">{{ currentDateTime }}</div>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div v-if="isDashboardReady" class="dashboard-content">
            <!-- 左侧KPI指标 -->
            <div class="left-section">
                <div class="kpi-cards">
                    <div class="kpi-card">
                        <div class="kpi-header">
                            <span class="kpi-title">今日物业费收入</span>
                        </div>
                        <div class="kpi-value">¥{{ todayIncome }}</div>
                        <div class="kpi-change">
                            较昨日同时段 {{ incomeChange }}% 
                            <el-icon :class="incomeChange >= 0 ? 'up' : 'down'">
                                <ArrowUp v-if="incomeChange >= 0" />
                                <ArrowDown v-else />
                            </el-icon>
                        </div>
                    </div>
                    
                    <div class="kpi-card">
                        <div class="kpi-header">
                            <span class="kpi-title">今日维修工单</span>
                        </div>
                        <div class="kpi-value">{{ todayRepairOrders }}</div>
                        <div class="kpi-change">
                            较昨日同时段 {{ repairChange }}% 
                            <el-icon :class="repairChange >= 0 ? 'up' : 'down'">
                                <ArrowUp v-if="repairChange >= 0" />
                                <ArrowDown v-else />
                            </el-icon>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 中间趋势图 -->
            <div class="middle-section">
                <div class="trend-chart">
                    <div class="section-header">
                        <h3>年度收费趋势图</h3>
                    </div>
                    <div class="chart-container" ref="trendChartRef"></div>
                </div>
            </div>

            <!-- 右侧物业信息 -->
            <div class="right-section">
                <div class="property-info">
                    <div class="info-header">
                        <h3>物业概况</h3>
                    </div>
                    <div class="info-content">
                        <div class="info-item">
                            <span class="label">管理社区数:</span>
                            <span class="value">{{ managedCommunities }}个</span>
                        </div>
                        <div class="info-item">
                            <span class="label">总住户数:</span>
                            <span class="value">{{ totalResidents }}户</span>
                        </div>
                        <div class="info-item">
                            <span class="label">物业费收缴率:</span>
                            <span class="value">{{ collectionRate }}%</span>
                        </div>
                        <div class="info-item">
                            <span class="label">本月到期:</span>
                            <span class="value">{{ expiringThisMonth }}户</span>
                        </div>
                        <div class="info-item">
                            <span class="label">本月续签:</span>
                            <span class="value">{{ renewedThisMonth }}户</span>
                        </div>
                        <div class="info-item">
                            <span class="label">本月续签率:</span>
                            <span class="value">{{ renewalRate }}%</span>
                        </div>
                    </div>
                    <div class="donut-chart">
                        <div class="chart-container" ref="donutChartRef"></div>
                        <div class="chart-legend">
                            <div class="legend-item">
                                <span class="legend-color" style="background-color: #ffd700;"></span>
                                <span class="legend-text">已缴费</span>
                                <span class="legend-value">{{ paidCount }}</span>
                            </div>
                            <div class="legend-item">
                                <span class="legend-color" style="background-color: #666;"></span>
                                <span class="legend-text">未缴费</span>
                                <span class="legend-value">{{ unpaidCount }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部数据区域 -->
        <div v-if="isDashboardReady" class="bottom-section">
            <!-- 左侧质量检查数据 -->
            <div class="bottom-left">
                <div class="quality-inspection">
                    <div class="section-header">
                        <h3>设备安全检查</h3>
                    </div>
                    <div class="inspection-stats">
                        <div class="stat-item">
                            <span class="stat-label">今日累计检查:</span>
                            <span class="stat-value">{{ todayInspections }}项</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">今日检查合格率:</span>
                            <span class="stat-value">{{ todayPassRate }}%</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">本月累计检查:</span>
                            <span class="stat-value">{{ monthInspections }}项</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">本月累计合格率:</span>
                            <span class="stat-value">{{ monthPassRate }}%</span>
                        </div>
                    </div>
                    <div class="inspection-table">
                        <el-table :data="inspectionList" size="small" :border="false">
                            <el-table-column prop="id" label="序号" width="50" />
                            <el-table-column prop="inspector" label="检查人员" width="80" />
                            <el-table-column prop="equipment" label="设备名称" width="100" />
                            <el-table-column prop="item" label="检查项目" width="90" />
                            <el-table-column prop="result" label="检查结果" width="70">
                                <template #default="{ row }">
                                    <el-tag :type="row.result === '合格' ? 'success' : 'danger'" size="small" style="font-size: 10px; padding: 2px 4px;">
                                        {{ row.result }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="time" label="检查时间" width="90" />
                            <el-table-column prop="location" label="检查位置" />
                        </el-table>
                    </div>
                </div>
            </div>

            <!-- 右侧价格公示 -->
            <div class="bottom-right">
                <div class="price-announcement">
                    <div class="section-header">
                        <h3>收费标准公示</h3>
                    </div>
                    <div class="price-table">
                        <el-table :data="priceList" size="small" :border="false">
                            <el-table-column prop="id" label="序号" width="50" />
                            <el-table-column prop="service" label="服务项目" width="300" show-overflow-tooltip />
                            <el-table-column prop="price" label="收费标准" width="80" />
                            <el-table-column prop="unit" label="计费单位" width="70" />
                            <el-table-column prop="description" label="说明" width="100" show-overflow-tooltip />
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
        <!-- 物业公司选择器 -->
        <PropertyCompanySelector
            v-model="showCompanySelector"
            @confirm="handleCompanyConfirm"
        />
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, computed } from 'vue'
import { Sunny, ArrowUp, ArrowDown } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import { useUserStore } from '@/store/user'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import PropertyCompanySelector from '@/components/PropertyCompanySelector.vue'
import { 
  checkPropertyCompanyPermission, 
  getDashboardData, 
  getKpiData, 
  getTrendData, 
  getInspectionData, 
  getBillingStandardData 
} from '@/api/propertyDashboard'

// 当前时间
const currentDateTime = ref('')
const updateDateTime = () => {
    const now = new Date()
    currentDateTime.value = now.toLocaleDateString('zh-CN') + ' ' + now.toLocaleTimeString('zh-CN')
}

// KPI数据
const todayIncome = ref('12,580.00')
const incomeChange = ref(15.6)
const todayRepairOrders = ref(23)
const repairChange = ref(-8.3)

// 物业信息数据
const managedCommunities = ref(8)
const totalResidents = ref(1256)
const collectionRate = ref(94.5)
const expiringThisMonth = ref(45)
const renewedThisMonth = ref(38)
const renewalRate = ref(84.4)
const paidCount = ref(1187)
const unpaidCount = ref(69)

// 安全检查数据
const todayInspections = ref(15)
const todayPassRate = ref(100.0)
const monthInspections = ref(156)
const monthPassRate = ref(98.7)

// 检查记录列表
const inspectionList = ref([
    { id: 1, inspector: '张师傅', equipment: '电梯A栋1号', item: '安全运行', result: '合格', time: '2025-01-30', location: 'A栋1单元' },
    { id: 2, inspector: '李师傅', equipment: '消防栓', item: '水压测试', result: '合格', time: '2025-01-30', location: 'B栋2单元' },
    { id: 3, inspector: '王师傅', equipment: '监控设备', item: '图像清晰度', result: '合格', time: '2025-01-30', location: '小区大门' },
    { id: 4, inspector: '赵师傅', equipment: '门禁系统', item: '刷卡功能', result: '合格', time: '2025-01-30', location: 'C栋入口' },
    { id: 5, inspector: '刘师傅', equipment: '照明系统', item: '亮度测试', result: '合格', time: '2025-01-30', location: '地下车库' }
])

// 价格公示列表
const priceList = ref([
    { id: 1, service: '物业管理费', price: '2.50', unit: '元/㎡', description: '包含公共区域清洁、绿化养护、安保服务等' },
    { id: 2, service: '电梯维护费', price: '0.80', unit: '元/㎡', description: '电梯日常维护、年检、维修等费用' },
    { id: 3, service: '公共能耗费', price: '0.60', unit: '元/㎡', description: '公共照明、水泵、监控等设备用电' },
    { id: 4, service: '垃圾清运费', price: '0.30', unit: '元/㎡', description: '生活垃圾收集、运输、处理费用' },
    { id: 5, service: '绿化养护费', price: '0.40', unit: '元/㎡', description: '小区绿化修剪、浇水、施肥等养护' },
    { id: 6, service: '安保服务费', price: '0.50', unit: '元/㎡', description: '门岗值班、巡逻、监控等安保服务' }
])

// 用户store和路由
const userStore = useUserStore()
const router = useRouter()

// 物业公司选择器
const showCompanySelector = ref(false)
const currentPropertyCompanyId = ref<number>(0)
const isDashboardReady = ref(false) // 控制是否显示驾驶舱内容

// 计算属性
const hasMultipleCompanies = computed(() => userStore.companyList.length > 1)
const hasSingleCompany = computed(() => userStore.companyList.length === 1)
const currentCompanyName = computed(() => {
  const company = userStore.companyList.find(c => c.id === currentPropertyCompanyId.value)
  return company?.name || ''
})

// 图表引用
const donutChartRef = ref<HTMLElement>()
const trendChartRef = ref<HTMLElement>()

// 权限检查和初始化
const checkPermissionAndInit = async () => {
  try {
    console.log('开始权限检查和初始化...')
    
    // 检查用户是否有物业公司权限
    const permissionResponse = await checkPropertyCompanyPermission()
    console.log('权限检查响应:', permissionResponse)
    
    if (permissionResponse.code !== 200 || !permissionResponse.data) {
      console.warn('用户权限不足，跳转到首页')
      ElMessage.error('您不是物业公司人员，无查看权限')
      router.push('/')
      return
    }

    // 获取用户物业公司列表
    await userStore.getUserPropertyCompanies()
    console.log('用户物业公司列表:', userStore.companyList)
    
    if (userStore.companyList.length === 0) {
      console.warn('用户没有关联的物业公司')
      ElMessage.error('您没有关联的物业公司')
      router.push('/')
      return
    }

    // 无论有几个物业公司，都需要用户选择
    if (hasSingleCompany.value) {
      console.log('用户只有一个物业公司，但需要用户确认选择')
      showCompanySelector.value = true
    } else if (hasMultipleCompanies.value) {
      // 如果有多个物业公司，显示选择器
      console.log('用户有多个物业公司，显示选择器')
      showCompanySelector.value = true
    }
  } catch (error) {
    console.error('权限检查失败:', error)
    ElMessage.error('权限检查失败，请稍后重试')
    router.push('/')
  }
}

// 加载驾驶舱数据
const loadDashboardData = async () => {
  try {
    const response = await getDashboardData(currentPropertyCompanyId.value)
    if (response.code === 200 && response.data) {
      const data = response.data
      
      // 更新KPI数据
      if (data.kpiData) {
        todayIncome.value = data.kpiData.todayIncome?.toString() || '0.00'
        incomeChange.value = data.kpiData.incomeChange || 0
        todayRepairOrders.value = data.kpiData.todayRepairOrders || 0
        repairChange.value = data.kpiData.repairChange || 0
        managedCommunities.value = data.kpiData.managedCommunities || 0
        totalResidents.value = data.kpiData.totalResidents || 0
        collectionRate.value = data.kpiData.collectionRate || 0
        expiringThisMonth.value = data.kpiData.expiringThisMonth || 0
        renewedThisMonth.value = data.kpiData.renewedThisMonth || 0
        renewalRate.value = data.kpiData.renewalRate || 0
        paidCount.value = data.kpiData.paidCount || 0
        unpaidCount.value = data.kpiData.unpaidCount || 0
      }
      
      // 更新趋势数据
      if (data.trendData) {
        // 这里可以更新趋势图表数据
      }
      
      // 更新安全检查数据
      if (data.inspectionData) {
        todayInspections.value = data.inspectionData.todayInspections || 0
        todayPassRate.value = data.inspectionData.todayPassRate || 0
        monthInspections.value = data.inspectionData.monthInspections || 0
        monthPassRate.value = data.inspectionData.monthPassRate || 0
        
        if (data.inspectionData.inspectionList) {
          inspectionList.value = data.inspectionData.inspectionList
        }
      }
      
      // 更新收费标准数据
      if (data.billingStandardData) {
        priceList.value = data.billingStandardData.map((item, index) => ({
          id: index + 1,
          service: item.service,
          price: item.price?.toString() || '0.00',
          unit: item.unit,
          description: item.description
        }))
      }
    }
  } catch (error) {
    console.error('加载驾驶舱数据失败:', error)
    ElMessage.error('加载驾驶舱数据失败')
  }
}

// 处理物业公司选择确认
const handleCompanyConfirm = async (companyId: number) => {
  try {
    currentPropertyCompanyId.value = companyId
    await loadDashboardData()
    // 设置驾驶舱为就绪状态，显示驾驶舱内容
    isDashboardReady.value = true
    console.log('物业公司选择确认，驾驶舱已就绪')
    
    // 等待DOM更新后初始化图表
    nextTick(() => {
      setTimeout(() => {
        console.log('物业公司选择后，重新初始化图表...')
        initChartsWithRetry()
      }, 300)
    })
  } catch (error) {
    console.error('处理物业公司选择确认失败:', error)
    ElMessage.error('加载驾驶舱数据失败，请重试')
  }
}

// 初始化环形图
const initDonutChart = () => {
    try {
        // 更严格的DOM元素检查
        if (!donutChartRef.value) {
            console.warn('环形图DOM元素引用为空，跳过初始化')
            return
        }
        
        if (!document.contains(donutChartRef.value)) {
            console.warn('环形图DOM元素不在文档中，跳过初始化')
            return
        }
        
        // 检查元素尺寸
        const rect = donutChartRef.value.getBoundingClientRect()
        if (rect.width === 0 || rect.height === 0) {
            console.warn('环形图DOM元素尺寸为0，跳过初始化')
            return
        }

        // 检查是否已存在图表实例，避免重复初始化
        const existingChart = echarts.getInstanceByDom(donutChartRef.value)
        if (existingChart) {
            console.warn('环形图实例已存在，跳过重复初始化')
            return
        }

        const chart = echarts.init(donutChartRef.value)
        const option = {
            series: [{
                type: 'pie',
                radius: ['35%', '65%'],
                center: ['50%', '50%'],
                data: [
                    { value: paidCount.value, name: '已缴费', itemStyle: { color: '#ffd700' } },
                    { value: unpaidCount.value, name: '未缴费', itemStyle: { color: '#666' } }
                ],
                label: { show: false },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        }

        chart.setOption(option)
        
        // 安全的resize监听器
        const safeResizeHandler = () => {
            try {
                if (chart && !chart.isDisposed()) {
                    chart.resize()
                }
            } catch (error) {
                if (error instanceof Error && 
                    (error.message.includes('getAttribute') || 
                     error.message.includes('getBoundingClientRect'))) {
                    console.warn('环形图resize操作跳过')
                    return
                }
                throw error
            }
        }
        
        window.addEventListener('resize', safeResizeHandler)
        
        console.log('环形图初始化成功')
    } catch (error) {
        if (error instanceof Error && 
            (error.message.includes('getAttribute') || 
             error.message.includes('getBoundingClientRect'))) {
            console.warn('环形图初始化失败，DOM元素未准备好')
            return
        }
        console.error('环形图初始化失败:', error)
    }
}

// 初始化趋势图
const initTrendChart = () => {
    try {
        // 更严格的DOM元素检查
        if (!trendChartRef.value) {
            console.warn('趋势图DOM元素引用为空，跳过初始化')
            return
        }
        
        if (!document.contains(trendChartRef.value)) {
            console.warn('趋势图DOM元素不在文档中，跳过初始化')
            return
        }
        
        // 检查元素尺寸
        const rect = trendChartRef.value.getBoundingClientRect()
        if (rect.width === 0 || rect.height === 0) {
            console.warn('趋势图DOM元素尺寸为0，跳过初始化')
            return
        }

        // 检查是否已存在图表实例，避免重复初始化
        const existingChart = echarts.getInstanceByDom(trendChartRef.value)
        if (existingChart) {
            console.warn('趋势图实例已存在，跳过重复初始化')
            return
        }

        const chart = echarts.init(trendChartRef.value)
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'cross' }
            },
            legend: {
                data: ['物业费收入', '收缴户数'],
                textStyle: { color: '#fff', fontSize: 12 }
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisLabel: { color: '#fff' }
            },
            yAxis: [
                {
                    type: 'value',
                    name: '收入(万元)',
                    axisLabel: { color: '#fff' },
                    splitLine: { show: false }
                },
                {
                    type: 'value',
                    name: '户数',
                    axisLabel: { color: '#fff' },
                    splitLine: { show: false }
                }
            ],
            series: [
                {
                    name: '物业费收入',
                    type: 'line',
                    yAxisIndex: 0,
                    data: [25.5, 28.2, 32.1, 29.8, 35.6, 38.9, 42.3, 45.7, 41.2, 39.8, 44.5, 47.2],
                    smooth: true,
                    itemStyle: { color: '#409eff' },
                    lineStyle: { width: 3 }
                },
                {
                    name: '收缴户数',
                    type: 'line',
                    yAxisIndex: 1,
                    data: [1250, 1380, 1520, 1450, 1680, 1820, 1950, 2080, 1920, 1850, 2050, 2180],
                    smooth: true,
                    itemStyle: { color: '#67c23a' },
                    lineStyle: { width: 3 }
                }
            ]
        }

        chart.setOption(option)
        
        // 安全的resize监听器
        const safeResizeHandler = () => {
            try {
                if (chart && !chart.isDisposed()) {
                    chart.resize()
                }
            } catch (error) {
                if (error instanceof Error && 
                    (error.message.includes('getAttribute') || 
                     error.message.includes('getBoundingClientRect'))) {
                    console.warn('趋势图resize操作跳过')
                    return
                }
                throw error
            }
        }
        
        window.addEventListener('resize', safeResizeHandler)
        
        console.log('趋势图初始化成功')
    } catch (error) {
        if (error instanceof Error && 
            (error.message.includes('getAttribute') || 
             error.message.includes('getBoundingClientRect'))) {
            console.warn('趋势图初始化失败，DOM元素未准备好')
            return
        }
        console.error('趋势图初始化失败:', error)
    }
}

// 组件挂载
onMounted(() => {
    console.log('PropertyDashboard组件开始挂载...')
    
    updateDateTime()
    setInterval(updateDateTime, 1000)
    
    // 检查权限并初始化
    checkPermissionAndInit()
    
    // 延迟初始化图表，确保DOM元素完全准备好
    setTimeout(() => {
        console.log('延迟初始化图表...')
        initChartsWithRetry()
    }, 500)
    
    // 添加窗口大小变化监听器，确保图表自适应
    window.addEventListener('resize', () => {
        try {
            // 安全的DOM操作，添加null检查
            if (donutChartRef.value && document.contains(donutChartRef.value)) {
                const donutChart = echarts.getInstanceByDom(donutChartRef.value)
                if (donutChart && !donutChart.isDisposed()) {
                    donutChart.resize()
                }
            }
            
            if (trendChartRef.value && document.contains(trendChartRef.value)) {
                const trendChart = echarts.getInstanceByDom(trendChartRef.value)
                if (trendChart && !trendChart.isDisposed()) {
                    trendChart.resize()
                }
            }
        } catch (error) {
            // 静默处理getBoundingClientRect相关错误
            if (error instanceof Error && 
                (error.message.includes('getAttribute') || 
                 error.message.includes('getBoundingClientRect'))) {
                console.warn('图表resize操作跳过，DOM元素未准备好')
                return
            }
            // 其他错误记录但不抛出
            console.error('图表resize操作失败:', error)
        }
    })
    
    console.log('PropertyDashboard组件挂载完成')
})

// 带重试机制的图表初始化
const initChartsWithRetry = (retryCount = 0) => {
    const maxRetries = 3
    
    try {
        console.log(`尝试初始化图表，第${retryCount + 1}次...`)
        
        // 检查DOM元素是否准备好
        if (!donutChartRef.value || !trendChartRef.value) {
            console.warn('图表DOM元素未准备好，等待重试...')
            if (retryCount < maxRetries) {
                setTimeout(() => initChartsWithRetry(retryCount + 1), 200)
            }
            return
        }
        
        // 检查元素是否在文档中
        if (!document.contains(donutChartRef.value) || !document.contains(trendChartRef.value)) {
            console.warn('图表DOM元素不在文档中，等待重试...')
            if (retryCount < maxRetries) {
                setTimeout(() => initChartsWithRetry(retryCount + 1), 200)
            }
            return
        }
        
        // 检查元素尺寸
        const donutRect = donutChartRef.value.getBoundingClientRect()
        const trendRect = trendChartRef.value.getBoundingClientRect()
        
        if (donutRect.width === 0 || donutRect.height === 0 || 
            trendRect.width === 0 || trendRect.height === 0) {
            console.warn('图表DOM元素尺寸为0，等待重试...')
            if (retryCount < maxRetries) {
                setTimeout(() => initChartsWithRetry(retryCount + 1), 200)
            }
            return
        }
        
        // DOM元素准备好，初始化图表
        console.log('图表DOM元素已准备好，开始初始化...')
        initDonutChart()
        initTrendChart()
        
    } catch (error) {
        console.error('图表初始化检查失败:', error)
        if (retryCount < maxRetries) {
            setTimeout(() => initChartsWithRetry(retryCount + 1), 200)
        }
    }
}
</script>

<style scoped lang="scss">
.property-dashboard-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e3c72 100%);
    color: #fff;
    padding: 12px;
    font-family: 'Microsoft YaHei', sans-serif;
    z-index: 9999;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    .dashboard-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        padding: 12px 16px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
        border-radius: 16px;
        backdrop-filter: blur(20px);
        border: 0.5px solid rgba(255, 255, 255, 0.15);
        box-shadow: 
            0 12px 40px rgba(0, 0, 0, 0.4),
            0 6px 20px rgba(0, 0, 0, 0.3),
            0 2px 8px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        flex-shrink: 0;

        .header-left .weather-info {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #e6f7ff;
        }

        .header-center {
            text-align: center;

            .page-title {
                font-size: 24px;
                font-weight: bold;
                margin: 0 0 4px 0;
                background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            }

            .company-name {
                font-size: 16px;
                color: #87ceeb;
                margin: 0 0 4px 0;
                font-weight: 500;
            }

            .fullscreen-tip {
                font-size: 12px;
                color: #b3d8ff;
            }
        }

        .header-right .datetime {
            font-size: 16px;
            font-weight: 500;
            color: #e6f7ff;
        }
    }

    .dashboard-content {
        display: grid;
        grid-template-columns: 0.8fr 1.4fr 0.8fr;
        gap: 12px;
        margin-bottom: 12px;
        flex: 1;
        min-height: 0;
        height: 100%;

        .left-section {
            display: flex;
            flex-direction: column;
            gap: 12px;
            height: 100%;

            .kpi-cards {
                display: flex;
                flex-direction: column;
                gap: 8px;
                flex-shrink: 0;
            }

            .kpi-card {
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
                border-radius: 12px;
                padding: 16px;
                backdrop-filter: blur(20px);
                border: 0.5px solid rgba(255, 255, 255, 0.15);
                box-shadow: 
                    0 12px 40px rgba(0, 0, 0, 0.4),
                    0 6px 20px rgba(0, 0, 0, 0.3),
                    0 2px 8px rgba(0, 0, 0, 0.2),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .kpi-header .kpi-title {
                    font-size: 16px;
                    color: #b3d8ff;
                }

                .kpi-value {
                    font-size: 28px;
                    font-weight: bold;
                    color: #ffd700;
                    margin: 8px 0 6px 0;
                    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
                }

                .kpi-change {
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    gap: 4px;

                    .up { color: #52c41a; }
                    .down { color: #ff4d4f; }
                }
            }

            .trend-chart {
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
                border-radius: 12px;
                padding: 12px;
                backdrop-filter: blur(20px);
                border: 0.5px solid rgba(255, 255, 255, 0.15);
                box-shadow: 
                    0 12px 40px rgba(0, 0, 0, 0.4),
                    0 6px 20px rgba(0, 0, 0, 0.3),
                    0 2px 8px rgba(0, 0, 0, 0.2),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
                flex: 1;
                display: flex;
                flex-direction: column;
                overflow: hidden;

                .section-header h3 {
                    font-size: 16px;
                    margin: 0 0 12px 0;
                    color: #e6f7ff;
                    flex-shrink: 0;
                }

                .chart-container {
                    flex: 1;
                    min-height: 0;
                }
            }
        }

        .middle-section {
            display: flex;
            flex-direction: column;
            gap: 12px;
            height: 100%;

            .trend-chart {
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
                border-radius: 12px;
                padding: 12px;
                backdrop-filter: blur(20px);
                border: 0.5px solid rgba(255, 255, 255, 0.15);
                box-shadow: 
                    0 12px 40px rgba(0, 0, 0, 0.4),
                    0 6px 20px rgba(0, 0, 0, 0.3),
                    0 2px 8px rgba(0, 0, 0, 0.2),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
                flex: 1;
                display: flex;
                flex-direction: column;
                overflow: hidden;

                .section-header h3 {
                    font-size: 16px;
                    margin: 0 0 12px 0;
                    color: #e6f7ff;
                    flex-shrink: 0;
                }

                .chart-container {
                    flex: 1;
                    min-height: 0;
                }
            }
        }

        .right-section .property-info {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
            border-radius: 12px;
            padding: 16px;
            backdrop-filter: blur(20px);
            border: 0.5px solid rgba(255, 255, 255, 0.15);
            box-shadow: 
                0 12px 40px rgba(0, 0, 0, 0.4),
                0 6px 20px rgba(0, 0, 0, 0.3),
                0 2px 8px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            height: 100%;
            display: flex;
            flex-direction: column;

            .info-header h3 {
                font-size: 18px;
                margin: 0 0 16px 0;
                color: #e6f7ff;
            }

            .info-content {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8px;
                margin-bottom: 16px;
                flex-shrink: 0;

                .info-item {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .label {
                        font-size: 14px;
                        color: #b3d8ff;
                    }

                    .value {
                        font-size: 16px;
                        font-weight: 500;
                        color: #fff;
                    }
                }
            }

            .donut-chart {
                flex: 1;
                display: flex;
                flex-direction: column;
                min-height: 0;

                .chart-container {
                    flex: 1;
                    min-height: 0;
                    margin-bottom: 12px;
                }

                .chart-legend {
                    display: flex;
                    justify-content: center;
                    gap: 20px;
                    flex-shrink: 0;

                    .legend-item {
                        display: flex;
                        align-items: center;
                        gap: 6px;

                        .legend-color {
                            width: 14px;
                            height: 14px;
                            border-radius: 2px;
                        }

                        .legend-text {
                            font-size: 13px;
                            color: #b3d8ff;
                        }

                        .legend-value {
                            font-size: 13px;
                            font-weight: 500;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }

    .bottom-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        flex: 1;
        min-height: 0;

        .bottom-left, .bottom-right {
            .quality-inspection, .price-announcement {
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
                border-radius: 12px;
                padding: 12px;
                backdrop-filter: blur(20px);
                border: 0.5px solid rgba(255, 255, 255, 0.15);
                box-shadow: 
                    0 12px 40px rgba(0, 0, 0, 0.4),
                    0 6px 20px rgba(0, 0, 0, 0.3),
                    0 2px 8px rgba(0, 0, 0, 0.2),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
                height: 100%;
                display: flex;
                flex-direction: column;
                overflow: hidden;

                .section-header h3 {
                    font-size: 16px;
                    margin: 0 0 12px 0;
                    color: #e6f7ff;
                    flex-shrink: 0;
                }

                .inspection-stats {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 8px;
                    margin-bottom: 8px;
                    flex-shrink: 0;

                    .stat-item {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .stat-label {
                            font-size: 12px;
                            color: #b3d8ff;
                        }

                        .stat-value {
                            font-size: 13px;
                            font-weight: 500;
                            color: #fff;
                        }
                    }
                }

                .inspection-table, .price-table {
                    flex: 1;
                    min-height: 0;
                    overflow: hidden;

                    :deep(.el-table) {
                        background: transparent !important;
                        color: #fff;
                        height: 100%;
                        font-size: 12px;

                        .el-table__header {
                            background: transparent !important;
                        }

                        th {
                            background: transparent !important;
                            color: #e6f7ff !important;
                            border-bottom: 0.5px solid rgba(255, 255, 255, 0.15) !important;
                            padding: 6px 0 !important;
                            font-size: 12px !important;
                        }

                        td {
                            background: transparent !important;
                            color: #fff !important;
                            border-bottom: 0.5px solid rgba(255, 255, 255, 0.08) !important;
                            padding: 4px 0 !important;
                            font-size: 11px !important;
                            white-space: nowrap !important;
                            overflow: hidden !important;
                            text-overflow: ellipsis !important;
                        }

                        .el-table__row:hover > td {
                            background: rgba(255, 255, 255, 0.08) !important;
                        }

                        .el-table__row.current-row > td {
                            background: rgba(255, 255, 255, 0.12) !important;
                        }

                        .el-table__row--striped > td {
                            background: transparent !important;
                        }

                        .el-table__body-wrapper {
                            background: transparent !important;
                        }

                        .el-table__empty-block {
                            background: transparent !important;
                        }

                        .el-table__empty-text {
                            color: #b3d8ff;
                            font-size: 12px;
                        }
                        
                        // 完全移除所有白色背景和边框
                        .el-table__inner-wrapper {
                            background: transparent !important;
                            border: none !important;
                        }
                        
                        .el-table__header-wrapper {
                            background: transparent !important;
                            border: none !important;
                        }
                        
                        // 移除表格外边框
                        .el-table {
                            border: none !important;
                            background: transparent !important;
                        }
                        
                        // 移除单元格边框
                        td, th {
                            border: none !important;
                            border-bottom: 0.5px solid rgba(255, 255, 255, 0.08) !important;
                        }
                        
                        // 移除最后一行的底部边框
                        tr:last-child td {
                            border-bottom: none !important;
                        }
                        
                        // 移除表格底部的白色细线
                        .el-table::after {
                            display: none !important;
                        }
                        
                        .el-table::before {
                            display: none !important;
                        }
                        
                        .el-table__inner-wrapper::after {
                            display: none !important;
                        }
                        
                        .el-table__inner-wrapper::before {
                            display: none !important;
                        }
                        
                        // 移除表格容器的所有边框和背景
                        .el-table__container {
                            background: transparent !important;
                            border: none !important;
                        }
                        
                        // 确保没有白色背景
                        .el-table__body, .el-table__header {
                            background: transparent !important;
                        }
                        
                        // 移除表格的默认边框样式
                        .el-table--border {
                            border: none !important;
                        }
                        
                        .el-table--border::after {
                            display: none !important;
                        }
                        
                        .el-table--border::before {
                            display: none !important;
                        }
                        
                        // 确保所有可能的白色背景都被移除
                        .el-table__empty-block {
                            background: transparent !important;
                        }
                        
                        .el-table__empty-text {
                            color: #b3d8ff !important;
                        }
                        
                        // 移除表格的默认边框
                        .el-table--border {
                            border-right: none !important;
                            border-bottom: none !important;
                        }
                        
                        // 确保表格容器完全透明
                        .el-table__container {
                            background: transparent !important;
                        }
                        
                        // 移除所有可能的边框线
                        .el-table__border-line {
                            display: none !important;
                        }
                        
                        // 确保表格行没有背景色
                        .el-table__row {
                            background: transparent !important;
                        }
                        
                        // 移除表格的默认样式
                        .el-table {
                            --el-table-border-color: transparent !important;
                            --el-table-header-bg-color: transparent !important;
                            --el-table-row-hover-bg-color: rgba(255, 255, 255, 0.08) !important;
                            --el-table-bg-color: transparent !important;
                            --el-table-tr-bg-color: transparent !important;
                            --el-table-tr-bg-color-hover: rgba(255, 255, 255, 0.08) !important;
                            --el-table-border: none !important;
                            --el-table-header-background-color: transparent !important;
                            --el-table-border-color: transparent !important;
                        }
                        
                        // 确保表格的所有部分都是透明的
                        .el-table__body, .el-table__header, .el-table__footer {
                            background: transparent !important;
                        }
                        
                        // 确保表格标题栏完全透明
                        .el-table__header-wrapper {
                            background: transparent !important;
                        }
                        
                        .el-table__header-wrapper th {
                            background: transparent !important;
                        }
                        
                        // 移除所有表格边框线
                        .el-table__border-line {
                            display: none !important;
                        }
                        
                        .el-table__border-line::after {
                            display: none !important;
                        }
                        
                        .el-table__border-line::before {
                            display: none !important;
                        }
                        
                        // 移除表格的默认边框和背景
                        .el-table__inner-wrapper {
                            background: transparent !important;
                            border: none !important;
                        }
                        
                        // 确保表格行完全透明
                        .el-table__row {
                            background: transparent !important;
                        }
                        
                        .el-table__row > td {
                            background: transparent !important;
                        }
                        
                        // 移除表格的默认边框样式
                        .el-table--border {
                            border: none !important;
                        }
                        
                        // 确保没有白色背景
                        .el-table__body-wrapper {
                            background: transparent !important;
                        }
                        
                        .el-table__header-wrapper {
                            background: transparent !important;
                        }
                        
                        // 移除表格的默认边框线
                        .el-table__border-line {
                            display: none !important;
                        }
                        
                        // 确保表格容器完全透明
                        .el-table__container {
                            background: transparent !important;
                            border: none !important;
                        }
                        
                        // 强制移除所有可能的白色背景
                        .el-table * {
                            background-color: transparent !important;
                        }
                        
                        // 确保表格标题栏完全没有白色背景
                        .el-table__header-wrapper,
                        .el-table__header-wrapper *,
                        .el-table__header,
                        .el-table__header * {
                            background-color: transparent !important;
                            background: transparent !important;
                        }
                        
                        // 移除表格的所有边框和分割线
                        .el-table__border-line,
                        .el-table__border-line *,
                        .el-table::after,
                        .el-table::before,
                        .el-table__inner-wrapper::after,
                        .el-table__inner-wrapper::before {
                            display: none !important;
                            background: none !important;
                            border: none !important;
                        }
                        
                        // 确保表格单元格完全透明
                        .el-table td, .el-table th {
                            background-color: transparent !important;
                        }
                        
                        // 移除表格的默认白色背景
                        .el-table {
                            background-color: transparent !important;
                        }
                        
                        // 确保表格行完全透明
                        .el-table tr {
                            background-color: transparent !important;
                        }
                        
                        // 移除表格的默认边框
                        .el-table--border {
                            border: none !important;
                        }
                        
                        // 确保表格的所有包装器都是透明的
                        .el-table__body-wrapper,
                        .el-table__header-wrapper,
                        .el-table__footer-wrapper {
                            background-color: transparent !important;
                        }
                        
                        // 移除表格的默认边框线
                        .el-table__border-line {
                            display: none !important;
                        }
                        
                        // 确保表格的固定列也是透明的
                        .el-table__fixed,
                        .el-table__fixed-right,
                        .el-table__fixed-left {
                            background-color: transparent !important;
                        }
                        
                        // 移除表格的默认边框
                        .el-table__border {
                            display: none !important;
                        }

                        .el-table__loading-mask {
                            background-color: rgba(0, 0, 0, 0.3) !important;
                        }

                        .el-table__loading-spinner {
                            color: #fff !important;
                        }

                        // 排序图标样式
                        .el-table__sort-caret {
                            border-color: #fff transparent transparent transparent !important;
                        }

                        .el-table__sort-caret.ascending {
                            border-bottom-color: #fff !important;
                            border-top-color: transparent !important;
                        }

                        .el-table__sort-caret.descending {
                            border-top-color: #fff !important;
                            border-bottom-color: transparent !important;
                        }

                        // 展开图标样式
                        .el-table__expand-icon {
                            color: #fff !important;
                        }

                        .el-table__expand-icon .el-table__expand-icon-icon {
                            color: #fff !important;
                        }

                        // 选择框样式
                        .el-table__selection {
                            color: #fff !important;
                        }

                        .el-checkbox__input .el-checkbox__inner {
                            background-color: transparent !important;
                            border-color: rgba(255, 255, 255, 0.3) !important;
                        }

                        .el-checkbox__input.is-checked .el-checkbox__inner {
                            background-color: #409eff !important;
                            border-color: #409eff !important;
                        }

                        // 过滤器样式
                        .el-table-filter {
                            background-color: rgba(0, 0, 0, 0.8) !important;
                            border: 0.5px solid rgba(255, 255, 255, 0.2) !important;
                        }

                        .el-table-filter__list {
                            background-color: transparent !important;
                        }

                        .el-table-filter__list-item {
                            color: #fff !important;
                        }

                        .el-table-filter__list-item:hover {
                            background-color: rgba(255, 255, 255, 0.1) !important;
                        }

                        // 工具提示样式
                        .el-tooltip__popper {
                            background-color: rgba(0, 0, 0, 0.9) !important;
                            color: #fff !important;
                            border: 0.5px solid rgba(255, 255, 255, 0.2) !important;
                        }

                        // 弹出框样式
                        .el-popover {
                            background-color: rgba(0, 0, 0, 0.9) !important;
                            color: #fff !important;
                            border: 0.5px solid rgba(255, 255, 255, 0.2) !important;
                        }

                        .el-popover__title {
                            color: #fff !important;
                        }

                        // 下拉菜单样式
                        .el-dropdown-menu {
                            background-color: rgba(0, 0, 0, 0.9) !important;
                            border: 0.5px solid rgba(255, 255, 255, 0.2) !important;
                        }

                        .el-dropdown-menu__item {
                            color: #fff !important;
                        }

                        .el-dropdown-menu__item:hover {
                            background-color: rgba(255, 255, 255, 0.1) !important;
                        }

                        .el-dropdown-menu__item.is-disabled {
                            color: rgba(255, 255, 255, 0.5) !important;
                        }

                        // 对话框样式
                        .el-dialog {
                            background-color: rgba(0, 0, 0, 0.9) !important;
                            border: 0.5px solid rgba(255, 255, 255, 0.2) !important;
                        }

                        .el-dialog__header {
                            background-color: transparent !important;
                            border-bottom: 0.5px solid rgba(255, 255, 255, 0.2) !important;
                        }

                        .el-dialog__title {
                            color: #fff !important;
                        }

                        .el-dialog__body {
                            color: #fff !important;
                        }

                        .el-dialog__footer {
                            border-top: 0.5px solid rgba(255, 255, 255, 0.2) !important;
                        }

                        // 消息框样式
                        .el-message {
                            background-color: rgba(0, 0, 0, 0.9) !important;
                            border: 0.5px solid rgba(255, 255, 255, 0.2) !important;
                        }

                        .el-message__content {
                            color: #fff !important;
                        }

                        .el-message--success {
                            border-color: rgba(82, 196, 26, 0.5) !important;
                        }

                        .el-message--warning {
                            border-color: rgba(230, 162, 60, 0.5) !important;
                        }

                        .el-message--error {
                            border-color: rgba(255, 77, 79, 0.5) !important;
                        }

                        .el-message--info {
                            border-color: rgba(64, 158, 255, 0.5) !important;
                        }

                        // 通知框样式
                        .el-notification {
                            background-color: rgba(0, 0, 0, 0.9) !important;
                            border: 0.5px solid rgba(255, 255, 255, 0.2) !important;
                        }

                        .el-notification__title {
                            color: #fff !important;
                        }

                        .el-notification__content {
                            color: #fff !important;
                        }

                        .el-notification__closeBtn {
                            color: #fff !important;
                        }

                        // 加载框样式
                        .el-loading-mask {
                            background-color: rgba(0, 0, 0, 0.7) !important;
                        }

                        .el-loading-spinner {
                            color: #fff !important;
                        }

                        .el-loading-text {
                            color: #fff !important;
                        }

                        // 去除表格的白色背景
                        .el-table__inner-wrapper {
                            background: transparent !important;
                        }

                        .el-table__body {
                            background: transparent !important;
                        }

                        .el-table__fixed-header-wrapper {
                            background: transparent !important;
                        }

                        .el-table__fixed-body-wrapper {
                            background: transparent !important;
                        }

                        // 确保表格边框和分割线正确显示
                        .el-table__border-line {
                            background-color: rgba(255, 255, 255, 0.15) !important;
                        }

                        .el-table__fixed-right-patch {
                            background-color: transparent !important;
                        }

                        .el-table__fixed {
                            background-color: transparent !important;
                        }

                        .el-table__fixed-right {
                            background-color: transparent !important;
                        }

                        .el-table__fixed-left {
                            background-color: transparent !important;
                        }
                    }
                }

                .chart-container {
                    flex: 1;
                    min-height: 0;
                }
            }
        }
    }
}

// 响应式设计优化
@media (max-width: 1600px) {
    .property-dashboard-fullscreen {
        .dashboard-content {
            grid-template-columns: 0.8fr 1.4fr 0.8fr;
            gap: 10px;
        }

        .bottom-section {
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
    }
}

@media (max-width: 1400px) {
    .property-dashboard-fullscreen {
        .dashboard-content {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .bottom-section {
            grid-template-columns: 1fr;
            gap: 10px;
        }
    }
}

@media (max-width: 768px) {
    .property-dashboard-fullscreen {
        padding: 8px;

        .dashboard-header {
            flex-direction: column;
            gap: 8px;
            text-align: center;
            padding: 8px 12px;

            .page-title {
                font-size: 20px;
            }
        }

        .dashboard-content {
            gap: 8px;
        }

        .right-section .property-info .info-content {
            grid-template-columns: 1fr;
        }

        .bottom-section {
            gap: 8px;
        }
    }
}

:deep(.el-tag) {
    --el-tag-bg-color: transparent;
    --el-tag-border-color: rgba(255, 255, 255, 0.3);
    --el-tag-text-color: #fff;
}

:deep(.el-tag--success) {
    --el-tag-bg-color: rgba(82, 196, 26, 0.2);
    --el-tag-border-color: rgba(82, 196, 26, 0.5);
    --el-tag-text-color: #52c41a;
}

:deep(.el-tag--danger) {
    --el-tag-bg-color: rgba(255, 77, 79, 0.2);
    --el-tag-border-color: rgba(255, 77, 79, 0.5);
    --el-tag-text-color: #ff4d4f;
}

// 分页器样式
:deep(.el-pagination) {
    --el-pagination-bg-color: transparent;
    --el-pagination-text-color: #fff;
    --el-pagination-border-color: rgba(255, 255, 255, 0.2);
    --el-pagination-hover-color: #409eff;
}

:deep(.el-pagination .el-pager li) {
    background-color: transparent;
    color: #fff;
    border: 0.5px solid rgba(255, 255, 255, 0.2);
}

:deep(.el-pagination .el-pager li.is-active) {
    background-color: #409eff;
    color: #fff;
}

:deep(.el-pagination .el-pager li:hover) {
    background-color: rgba(64, 158, 255, 0.2);
    color: #409eff;
}

// 自定义滚动条样式
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
    width: 6px;
    height: 6px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb:hover) {
    background: rgba(255, 255, 255, 0.5);
}

// 全局移除表格白色背景和边框
:deep(.el-table) {
    --el-table-border-color: transparent !important;
    --el-table-header-bg-color: transparent !important;
    --el-table-bg-color: transparent !important;
    --el-table-tr-bg-color: transparent !important;
    --el-table-border: none !important;
    background: transparent !important;
    border: none !important;
}

:deep(.el-table__header-wrapper) {
    background: transparent !important;
}

:deep(.el-table__header) {
    background: transparent !important;
}

:deep(.el-table th) {
    background: transparent !important;
}

:deep(.el-table__border-line) {
    display: none !important;
}

:deep(.el-table::after),
:deep(.el-table::before) {
    display: none !important;
}


</style>
